<!--意见反馈-->
<template>
	<view class="opinion-box">
		<view class="op-form">
			<view class="op-form-item">
				<view class="op-form-item-header">
					<text class="op-label">反馈内容（必填）</text>
					<text class="op-text">{{comContentNum}}/{{max}}</text>
				</view>
				<view class="op-textarea">
					<u-input type="textarea" 
						v-model="content" 
						placeholder="请描述您遇到的问题"
						:maxlength="max"
						:height="280" 
						:auto-height="false">
					</u-input>
				</view>
			</view>
			
			<view class="op-form-item">
				<view class="op-form-item-header">
					<text class="op-label">添加图片（必填）</text>
					<text class="op-text">{{comImageNum}}/{{imageMax}}</text>
				</view>
				<view class="op-upload">
					<u-upload :action="action" 
						:file-list="imageList" 
						:max-count="imageMax"
						:width="140"
						:height="140"
						del-bg-color="#000"
						@on-success="onUploadSuccess"
						@on-remove="onUploadRemove">
					</u-upload>
				</view>
			</view>
			
			<view class="op-form-item">
				<view class="op-form-item-header">
					<text class="op-label">联系方式（必填）</text>
				</view>
				<view class="op-input">
					<u-input v-model="value" placeholder="填写您的手机号码或邮箱"/>
				</view>
			</view>
			
			<view class="op-submit-btn">
				<u-button type="primary" 
					shape="circle" 
					:ripple="true"
					@click="onSubmitFeedback">
					提交反馈
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				content: '',
				max: 200,
				imageMax: 4,
				imageList: [],
				action: 'http://www.example.com/upload',
				value: ''
			}
		},
		computed: {
			comContentNum(){
				//通过计算属性，返回当前反馈内容的字符串长度
				return this.content.length;
			},
			
			comImageNum(){
				//返回当前添加的图片数量
				return this.imageList.length;
			}
		},
		methods: {
			
			/**图片上传成功时触发*/
			onUploadSuccess(data){
				this.imageList.push({url: data.data.url});
			},
			
			/**移除图片时触发*/
			onUploadRemove(index){
				this.imageList.splice(index, 1);
			},
			
			/**提交反馈信息*/
			onSubmitFeedback(){
				let msg = '';
				if(this.content == ''){
					msg = '请填写反馈内容。';
				}else if(this.imageList.length === 0){
					msg = '请上传反馈图片。'
				}else if(!this.$u.test.mobile(this.value) && !this.$u.test.email(this.value)){
					msg = '请填写手机号/邮箱';
				}
				if(msg != ''){
					uni.showToast({
						title: msg,
						icon: 'none'
					})
					return
				}
				//这里调用请求
			}
		}
	}
</script>

<style scoped lang="scss">
	.opinion-box{
		padding: 0 30rpx;
		background-color: #f3f4f6;
		height: 100vh;
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.op-form{
		height: 100%;
		.op-form-item{
			margin-bottom: 12rpx;
			.op-form-item-header{
				display: flex;
				justify-content: space-between;
				color: #000;
				font-size: 28rpx;
				line-height: 100rpx;
				.op-label{
					font-weight: bold;
				}
				.op-text{
					font-weight: 500;
				}
			}
			.op-textarea, .op-upload, .op-input{
				background-color: #fff;
				border-radius: 10rpx;
			}
			.op-textarea{
				padding: 30rpx 40rpx;
			}
			.op-upload{
				padding: 16rpx 24rpx;
			}
			.op-input{
				padding: 20rpx 40rpx;
			}
		}
		.op-submit-btn{
			padding: 20rpx;
			margin-top: 100rpx;
		}
		/deep/.u-size-default{
			height: 88rpx !important;
			line-height: 88rpx !important;
		}
	}

</style>
